<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
</head>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        #app {
            width: 100%;

        }
    </style>
<body>
    <div id="app">
        <!--标题-->
        <el-row>
            <div style="width: 100%;height:47px;background-color: whitesmoke;padding-top: 15px" >
                <el-lable style="font-size: 20px">
                    公司基本信息
                </el-lable>
            </div>
        </el-row>
        <br><br>
        <!--1公司名称-->
        <el-row>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="2">公司名称：</el-col>
            <el-col :span="8">
               <span style="width: 300px">
                    {{name}}
               </span>
            </el-col>
            <el-col :span="2">公司简称：</el-col>
            <el-col :span="8" style="width: 300px">
                <span style="width: 300px">
                    {{simpleName}}
               </span>
            </el-col>
        </el-row>
        <br>
        <!--2邮箱-->
        <el-row>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="2">邮箱：</el-col>
            <el-col :span="8">
               <span style="width: 300px">
                    {{email}}
               </span>
            </el-col>
            <el-col :span="2">联系电话：</el-col>
            <el-col :span="8" style="width: 300px">
                <span style="width: 300px">
                    {{phone}}
               </span>
            </el-col>
        </el-row>
        <br>
        <!--3地址-->
        <el-row>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="2">地址：</el-col>
            <el-col :span="8">
               <span style="width: 300px">
                    {{address}}
               </span>
            </el-col>
            <el-col :span="2">信用代码：</el-col>
            <el-col :span="8" style="width: 300px">
                <span style="width: 300px">
                    {{code}}
               </span>
            </el-col>
        </el-row>
        <br>
        <!--4公司法人-->
        <el-row>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="2">公司法人：</el-col>
            <el-col :span="8">
               <span style="width: 300px">
                    {{legalPerson}}
               </span>
            </el-col>
            <el-col :span="2">法人身份证：</el-col>
            <el-col :span="8" style="width: 300px">
                <span style="width: 300px">
                    {{legalPersonIdcard}}
               </span>
            </el-col>
        </el-row>
        <br>
        <!--5公司法人-->
        <el-row>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="2">合同章：</el-col>
            <el-col :span="8">
               <img style="width: 200px;height: 200px;border: 1px solid black" :src="contractSealPath">
            </el-col>
            <el-col :span="2">营业执照：</el-col>
            <el-col :span="8" style="width: 300px">
                <img style="width: 200px;height: 200px;border: 1px solid black" :src="businessLicensePath">
            </el-col>
        </el-row>
        <br>
        <!--6公司log-->
        <el-row>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="2">合同章：</el-col>
            <el-col :span="8">
                <img style="width: 200px;height: 200px;border: 1px solid black" :src="logoPath">
            </el-col>
        </el-row>
        <br>
        <!--7公司描述-->
        <el-row>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="2">公司描述</el-col>
            <el-col :span="18">
                <span style="width: 810px">
                    {{companyDesc}}
               </span>
            </el-col>
        </el-row>
        <br>
        <!--8删除按钮-->
        <el-row >
            <el-col :span="10">&nbsp;</el-col>
            <el-col :span="2">
                <el-button type="danger" @click="del()">删除</el-button>
            </el-col>
        </el-row>
    </div>
</body>
    <script type="text/javascript" th:inline="javascript">
        let appDemo = new Vue({
            el: "#app", //绑定的div
            data() {
                return {
                    id:"",  //id
                    name:"",  //公司名称
                    simpleName:"",  //公司简称
                    email:"",  //邮箱
                    phone:"",   //联系电话
                    address:"",  //地址
                    code:"",  //信用代码
                    legalPerson:"",  //法人
                    legalPersonIdcard:"",  //法人身份证
                    contractSeal:"",  //合同章
                    businessLicense:"",  //营业执照
                    logo:"",  //公司log
                    companyDesc:"",     //公司描述
                    contractSealPath:"",  //合同章路径
                    businessLicensePath:"",  //营业执照路径
                    logoPath:"",  //公司log路径
                };
            },
            methods: {
                //删除数据
                del : function(){
                    axios.get("com/delete", {
                            params: {
                               id:this.id
                            }
                        }, {emulateJSON: true},
                        {
                            headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                        }
                    ).then(res => {
                        console.log(res);
                        if(res.data.code == 200){
                            this.$message({
                                message: '新增成功',
                                type: 'success',
                            });
                            window.location.href="company";
                        }else {
                            this.$message.error('新增失败');
                        }
                    });
                }
            },
            created:function(){
                axios.get("com/findAll"
                ).then(res=>{
                    console.log(res);
                    this.id = res.data.data[0].id,
                    this.name = res.data.data[0].name,
                    this.simpleName = res.data.data[0].simpleName,
                    this.email = res.data.data[0].email,
                    this.phone = res.data.data[0].phone
                    this.address = res.data.data[0].address
                    this.code = res.data.data[0].code
                    this.legalPerson = res.data.data[0].legalPerson
                    this.legalPersonIdcard = res.data.data[0].legalPersonIdcard
                    this.contractSealPath = "com/getData?fileName=" + res.data.data[0].contractSeal
                    this.businessLicensePath = "com/getData?fileName=" + res.data.data[0].businessLicense
                    this.logoPath = "com/getData?fileName=" + res.data.data[0].logo
                    this.companyDesc = res.data.data[0].companyDesc
                })
            }
        });
    </script>
</html>